<template>
  <div>
    <div class="title">
      <el-input maxlength="15" style="width:200px;margin-left:20px" placeholder="搜索用户昵称/手机号"
                v-model="keyWord"></el-input>
      <el-button @click="getDayRecharge" type="primary" style="margin-left:20px;">搜索</el-button>
    </div>
    <div class="data">
      <el-table v-loading="loading" :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" align="center" min-width="100"></el-table-column>
        <el-table-column prop="rechargeDate" label="日期" align="center" min-width="100"></el-table-column>
        <el-table-column prop="userName" label="用户昵称" align="center" min-width="120"></el-table-column>
        <el-table-column prop="telephone" label="用户手机号" align="center"  min-width="100"></el-table-column>
        <el-table-column prop="type" :formatter="type" label="类型" align="center" min-width="120"></el-table-column>
        <el-table-column prop="quantity" label="金额" align="center" min-width="120"></el-table-column>
        <el-table-column prop="dataType" :formatter="dataType" label="类别" align="center" min-width="120"></el-table-column>
        <el-table-column prop="cardNo" :formatter="cardNo" label="卡号 " align="center" min-width="120"></el-table-column>
      </el-table>
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-size="pageSize"
              :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
    import {getDayRecharge} from '@/api/statistics'
    import {getToken} from '@/utils/auth'
    export default {
        data() {
            return {
                tableData: [],
                date: this.$route.query.date,
                keyWord: '',
                page: 1,
                pageSize: 10,
                loading: true,
                total: 0,
                data: {},
                dialogVisibleRefund: false,
                formDataRefund: {
                    amount: "",
                    recordId: "",
                    amount1: ""
                }
            }
        },
        created() {
            this.getDayRecharge()
        },
        methods: {
            cardNo(row) {
                if (row.cardNo) {
                    return row.cardNo
                } else {
                    return '-'
                }
            },
            type(row) {
                if (row.type==4) {
                    return "退款"
                } else if(row.type==5) {
                    return '退款失败'
                }else{
                    return '充值'
                }
            },
            dataType(row) {
                if (row.dataType==2) {
                    return "公众号充值"
                } else{
                    return '卡充值'
                }
            },
            getDayRecharge() {
                this.loading = true
                let param = {
                    date: this.date,
                    keyWord: this.keyWord,
                    pageNo: this.page,
                    pageSize: this.pageSize
                }
                getDayRecharge(param).then(res => {
                    this.tableData = [...res.data.records]
                    this.total = res.data.total
                    this.loading = false
                })
            },
            handleCurrentChange(val) {
                this.page = val
                this.getDayRecharge()
            }
        },
    }
</script>
<style scoped lang="scss">
  .data {
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 10px;
  }

  .order {
    display: flex;
    flex-direction: column;
    color: #fff;

    .text {
      color: #4adfff;
      width: 100px;
    }

    .order-1 {
      padding: 8px 10px;
      display: flex;
    }
  }
</style>
